<template>
	<view class="container" :style="'min-height:'+height+'px'">
		<view class="video-cont">
			<!-- #ifdef MP -->
			<view class="change-box" @click="showvideo = !showvideo" v-if="dataInfo.lease.monitorUrl">
				<image src="/static/icon/change.png" class="change-img"></image>
			</view>
			<video class="video" v-show="showvideo" autoplay v-if="dataInfo.lease.monitorUrl" :src="dataInfo.lease.monitorUrl"></video>
			<view v-show="!showvideo" class="video common-bg-img" :style="'background-image:url('+dataInfo.lease.defaultImageUrl+')'"></view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="change-box" @click="showvideo = !showvideo" v-if="dataInfo.lease.ezvizUrl">
				<image src="/static/icon/change.png" class="change-img"></image>
			</view>
			<EZUIKitJs :isshow="showvideo" v-show="showvideo" v-if="dataInfo.lease.ezvizUrl" :token="dataInfo.lease.accessToken" :url="dataInfo.lease.ezvizUrl" />
			<view v-show="!showvideo" class="video common-bg-img" :style="'background-image:url('+dataInfo.lease.defaultImageUrl+')'"></view>
			<!-- #endif -->
		</view>
		<view class="data-list common-box">
			<view class="subtitle">实时数据</view>
			<view class="cont-box spaceBetween">
				<view class="item">
					<view>水分</view>
					<image src="/static/icon/shuifen.png" mode="aspectFit"></image>
					<view class="bold" v-if="dataInfo.lease">{{dataInfo.lease.moisture}}%</view>
				</view>
				<view class="item">
					<view>温度</view>
					<image src="/static/icon/wendu.png" mode="aspectFit"></image>
					<view class="bold" v-if="dataInfo.lease">{{dataInfo.lease.temp}}&#176;C</view>
				</view>
				<view class="item">
					<view>二氧化碳</view>
					<image src="/static/icon/eyht.png" mode="aspectFit"></image>
					<view class="bold" v-if="dataInfo.lease">{{dataInfo.lease.co2}}ppm</view>
				</view>
				<view class="item">
					<view>光照</view>
					<image src="/static/icon/guangzhao.png" mode="aspectFit"></image>
					<view class="bold" v-if="dataInfo.lease">{{dataInfo.lease.illumination}}lux</view>
				</view>
			</view>
		</view>
		<view class="common-box">
			<view class="subtitle">土地信息</view>
			<scroll-view class="land-list-box hasmt" scroll-x>
				<view class="item" v-for="item in dataInfo.detail">
					<view class="cover common-bg-img" :style="'background-image:url('+item.imageUrl+')'"></view>
					<view class="info">
						<view class="text">编号：{{item.landNo}}</view>
						<view class="text">面积：{{item.area}}m<text class="square-unit">2</text></view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="item-text">
				<text>配送周期：</text>
				<text class="value">{{dataInfo.detail.num}}次</text>
			</view> -->
		</view>
		<!-- <view class="common-box">
			<view class="subtitle">种植信息</view>
			<view class="item-image">
				<image class="cover" src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/069e3c27c1604640a7afb9d9f16c1845.jpg"></image>
				<view>豌豆<text class="gray">（未播种）</text></view>
				<image class="rightrow" src="/static/icon/rightrow.png"></image>
			</view>
			<view class="item-text">
				<text>种植状态：</text>
				<text class="value">未播种</text>
			</view>
			<view class="item-text">
				<text>种植面积：</text>
				<text class="value">10m<text class="square-unit">2</text></text>
			</view>
			<view class="item-text">
				<text>播种时间：</text>
				<text class="value">20200716</text>
			</view>
			<view class="item-text">
				<text>种植天数：</text>
				<text class="value">10天</text>
			</view>
			<view class="item-text">
				<text>预计成熟时间：</text>
				<text class="value">未定</text>
			</view>
		</view> -->
		<!-- <view class="common-box">
			<view class="subtitle">
				<text>配送信息</text>
				<view class="centerFlex flexRightbox">
					<text class="right-text">剩余5期</text>
					<image class="rightrow" src="/static/icon/rightrow.png"></image>
				</view>
			</view>
			<view class="item-text">
				<text>第一期：</text>
				<text class="value">进行中</text>
			</view>
			<view class="item-text">
				<text>快递公司：</text>
				<text class="value">未发货</text>
			</view>
			<view class="item-text">
				<text>快递单号：</text>
				<text class="value">未发货</text>
			</view>
		</view> -->
		
		<view class="common-box">
			<view class="subtitle">订单信息</view>
			<view class="item-text">
				<text>订单编号：</text>
				<text class="value">{{dataInfo.orderNo}}</text>
			</view>
			<view class="item-text">
				<text>下单时间：</text>
				<text class="value">{{format(dataInfo.gmtCreate)}}</text>
			</view>
			<view class="item-text">
				<text>订单总价：</text>
				<text class="value">&yen;{{dataInfo.actualPrice / 100.0}}</text>
			</view>
			<view class="item-text" v-if="dataInfo.gmtPay">
				<text>支付时间：</text>
				<text class="value">{{format(dataInfo.gmtPay)}}</text>
			</view>
			<view class="item-text" v-if="dataInfo.payChannel">
				<text>支付方式：</text>
				<text class="value">{{dataInfo.payChannel}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import EZUIKitJs from '@/components/EZUIKitJs.vue'
	export default {
		components: {
			EZUIKitJs
		},
		data() {
			return {
				orderNo:'',
				height:0,
				dataInfo:{
					detail:{imageUrl:''},
					lease:{accessToken:'',monitorUrl:''}
				},
				showvideo:false,
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			const that = this
			this.height = uni.getSystemInfoSync().windowHeight
			that.orderNo = options.id
			this.loadData()
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '秋歌体验田',
				imageUrl: 'http://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share_bg.jpg',
				path: '/pages/index/index'
			}
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('leaseOrder', 'detail',{orderNo:that.orderNo}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					that.dataInfo = data
					uni.hideLoading()
				})
			},
			videoErrorCallback: function(e) {
				
			},
			add0(m){return m<10?'0'+m:m },
			format(shijianchuo){
				//shijianchuo是整数，否则要parseInt转换
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding:0 15px 150upx;
		background-color: #F9F9F9;
	}
	.video-cont{
		position: relative;
		margin-top: 22upx;
		.video{
			width:100%;
			height: 356upx;
			border-radius: 20upx;
		}
		.change-box{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position:absolute;
			left:-15px;
			top:0;
			width:80upx;
			height: 60upx;
			z-index: 9;
			border-top-right-radius: 100%;
			border-bottom-right-radius: 100%;
			background-color: rgba(0,0,0,0.8);
			.change-img{
				width:60upx;
				height: 60upx;
			}
		}
	}
	.common-box{
		padding:40upx 30upx;
		margin-top: 22upx;
		background:rgba(255,255,255,1);
		border-radius:20upx;
		.rightrow{
			width: 16upx;
			height: 25upx;
			margin-left: auto;
		}
		.subtitle{
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #333333;
			font-weight: bold;
			.right-text{
				margin-right:25upx;
				font-size: 24upx;
				color: #666666;
				font-weight: normal;
			}
			&.hasmt{
				margin-top: 83upx;
			}
		}
		.item-text{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
			color: #666666;
			.name{
				color: #333333;
			}
			&:not(:first-child){
				margin-top: 38upx;
			}
		}
		.item-image{
			display: flex;
			align-items: center;
			margin-top: 27upx;
			font-size: 30upx;
			color: #333333;
			.cover{
				width:84upx;
				height: 84upx;
				margin-right: 24upx;
				border-radius: 50%;
			}
			.gray{
				color: #999999;
			}
			
		}
	}
	.data-list{
		.cont-box{
			margin-top: 40upx;
			padding:0 20upx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 24upx;
				color: #333333;
				image{
					width:40upx;
					height: 40upx;
					margin:26upx 0 34upx;
				}
			}
			.bold{
				font-weight: bold;
			}
		}
	}
	.symbol{
		width:19upx;
		height:19upx;
		margin-right:5upx;
	}
	.land-list-box{
		white-space: nowrap;
		margin-top: 30upx;
		.item{
			display: inline-flex;
			margin-right: 40upx;
			.cover{
				width:80upx;
				height: 80upx;
				margin-right:20upx;
				border-radius: 20upx;
				flex-shrink: 0;
			}
			.info{
				font-size: 24upx;
			}
		}
	}
</style>
